import React from 'react';
import { connect } from 'react-redux';

function Todolist (props) {
    
    function onCreate () {
        // 拿到input的值
        const value = document.querySelector('#inp').value;
        // 把value扔给redux
        props.dispatch({
            type: 'CREATE', // 形容现在的动作是要干啥
            value,          // 现在的动作的内容
        });
    }

    function onDelete (i) {
        props.dispatch({
            type: 'DELETE', // 形容现在的动作是要干啥
            idx: i,         // 现在的动作的内容
        });
    }

    return (
        <div>
            <input id="inp" type="text" />
            <button onClick={ onCreate }>新增</button>
            <ul>
                { 
                    props.list.map((item, i) => (
                        <li key={ i }>
                            { item }
                            <button onClick={ () => onDelete(i) }>删除</button>
                        </li>
                    ))
                }
            </ul>
        </div>
    );
}

function mapState2Props (state) {
    return {
        ...state,
    };
}

export default connect(mapState2Props)(Todolist);
